<template>
  <scroll-view scroll-y @scrolltolower='handleToLower'>
    <view class="album">
      <view class="album-swiper">
        <swiper autoplay indicator-dots circular>
          <swiper-item v-for="v in banner" :key="v.id">
            <image :src="v.thumb" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>
      <view class="album-list">
        <navigator class="album-item" v-for="v in album" :key="v.id" :url="`/pages/album/index?id=${v.id}`">
          <view class="album-img-wrap">
            <image :src="v.cover" mode="aspectFill" />
          </view>
          <view class="album-info">
            <view class="album-name">{{v.name}}</view>
            <view class="album-desc">{{v.desc}}</view>
            <view class="album-btn">
              <view class="album-attention">关注</view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        order: 'new',
        limit: 30,
        skip: 0
      },
      banner: [],
      album: [],
      hasMore: true
    }
  },
  mounted() {
    uni.setNavigationBarTitle({ title: '专辑' })
    this.loadAlbum()
  },
  methods: {
    async loadAlbum() {
      const { res } = await this.request({ url: '/image/v1/wallpaper/album', data: this.params })
      if (!res.album.length) {
        this.hasMore = false
        uni.showToast({ title: '没有更多数据了', icon: 'none' })
      }
      if (!this.banner.length) {
        this.banner = res.banner
      }
      this.album.push(...res.album)
    },
    handleToLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit
        this.loadAlbum()
      } else {
        uni.showToast({ title: '没有更多数据了', icon: 'none' })
      }
    }
  }
}
</script>

<style  lang='scss' scoped>
.album {
  height: calc(100vh - 36px);
}
.album-swiper {
  swiper {
    height: calc(750rpx / 2.3);
  }
  image {
    height: 100%;
  }
}
.album-list {
  padding: 10rpx;
  .album-item {
    display: flex;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #ccc;
  }
  image {
    width: 200rpx;
    height: 200rpx;
  }
  .album-img-wrap {
    flex: 2;
  }
  .album-info {
    flex: 5;
    overflow: hidden;
  }
  .album-name {
    color: #000;
  }
  .album-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .album-btn {
    display: flex;

    justify-content: flex-end;
    margin-top: 40rpx;
  }
  .album-attention {
    padding: 10rpx;
    border: 1rpx solid $color;
    color: $color;
  }
}
</style>